<template>
  <div class="order-check">
    <van-nav-bar title="订单结算台" left-arrow @click-left="$router.back()" fixed/>
    <div class="order-content">
      <div class="address" v-if="order.address" @click="$jumpToPath('address/index')">
        <div class="left">
          <van-icon name="location-o" />
          <div class="address-box">
            <h3 class="number">{{ order.address.name}} {{ order.address.phone }}</h3>
            <span class="location">{{ order.address.region.province }} {{ order.address.city }} {{ order.address.region.region }} {{ order.address.detail }}</span>
          </div>
        </div>

        <div class="right">
          <van-icon name="arrow" class="icon-arrow"></van-icon>
        </div>
      </div>
      <div class="decoration"></div>

      <div v-if="order.goodsList">
       <!-- 订单列表 -->
       <OrderItem v-for="item in order.goodsList" :key="item.goods_id" :item="item"></OrderItem>

        <van-cell v-if="order.orderTotalNum" class="common-cell" title="" :value="'共'+ order.orderTotalNum +'件商品，合计：'" value-class="total_text">
          <template #extra>
            <div v-if="order.orderTotalPrice"><span class="total red">￥ {{ order.orderTotalPrice}}</span></div>
          </template>
        </van-cell>
      </div>

      <van-cell-group class="group-cell">
        <van-cell title="订单总金额：" :value="'￥' + order.orderPrice" class="common-cell" value-class="red">
        </van-cell>
        <!-- 优惠券单元格 -->
        <van-coupon-cell class="common-cell" :coupons="order.couponList" :chosen-coupon="chosenCoupon" @click="showList = true" />

        <van-cell title="配送费用：" value="+ ￥0.00" class="common-cell" value-class="red">
        </van-cell>
      </van-cell-group>

      <van-cell-group class="group-cell" v-if="assets">
        <van-cell title="支付方式" class="common-cell">
        </van-cell>
        <van-cell :title="'余额支付（可用￥'+ assets.balance + '元）'" class="common-cell">
          <template #icon>
            <div class="icon-box">
              <i class="iconfont icon-money"></i>
            </div>
          </template>
          <template #right-icon>
            <van-icon name="success" color="#fa2209" class="icon-success"></van-icon>
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group class="group-cell">
        <van-field class="message" v-model="params.remark" rows="1" autosize type="textarea" maxlength="50" placeholder="选填：买家留言（50字以内）" show-word-limit />
      </van-cell-group>
    </div>

    <van-cell-group class="group-cell">
      <van-cell class="common-cell order-footer">
        <template #title>
          <div>实付款：<span class="red">￥{{ order.orderPayPrice }}</span></div>
        </template>
        <template #extra>
          <van-button @click="checkout()" color="linear-gradient(to right, #ff6034, #ee0a24)" class="submit_btn">
            提交订单
          </van-button>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import OrderItem from '@/components/OrderItem'
import { mapState, mapGetters } from 'vuex'
import { Dialog, Toast } from 'vant'
import { checkout, checkoutOrder } from '@/apis/order'
import { getAssets } from '@/apis/user'
export default {
  components: { OrderItem },
  name: 'OrderCheck',
  data () {
    return {
      coupons: {},
      showList: false,
      chosenCoupon: -1,
      params: {
        ...this.$route.query,
        delivery: 0,
        couponId: 0,
        isUsePoints: 0,
        // 留言
        remark: '',
        payType: 10
      },
      assets: null,
      userInfo: {},
      order: {},
      // 个人信息
      personal: {},
      // 积分相关
      setting: {},
      // 我的订单列表
      orderList: {}
    }
  },
  created () {
    this.CheckOutOrder()
    this.getAssets()
  },
  computed: {
    ...mapState('cart', ['cartList', 'goodsNum']),
    ...mapGetters('cart', ['totalPrice', 'totalNum'])
  },
  methods: {
    async CheckOutOrder () {
      const {
        data: { order, personal, setting }
      } = await checkoutOrder(this.params)
      this.order = order
      this.personal = personal
      this.setting = setting

      if (!this.order.address) {
        Dialog.alert({
          title: '在购买商品前请先设置收货地址哦',
          confirmButtonText: '去设置'
        }).then(() => {
          // on close
          this.$jumpToPath('address/create')
        })
      }
    },
    async getAssets () {
      // const { data: { assets } } = getAssets()
      const { data: { assets } } = await getAssets()
      this.assets = assets
    },
    async checkout () {
      // 提交订单
      await checkout(this.params)
      Toast('支付成功')
      this.$router.replace('/pages/order/index')
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell__right-icon {
  line-height: 10.333vw;
}
.order-content {
  margin-top: 50px;
  max-height: 140vw;
  overflow: auto;
}
.order-content::-webkit-scrollbar {
  width: 0.5rem;
  background-color: transparent;
}
.order-check {
  background-color: #fafafa;
  padding: 0px 5px;

  padding: 10px;
  .van-icon-location-o {
    float: left;
    margin: 10px;
    width: 30px;
    text-align: center;
    font-size: 20px;
  }
  .address {
    height: 75px;
    .left {
      // aa
      float: left;
      width: 95%;
      margin-bottom: 10px;
      font-size: 14px;

      .number {
        font: normal 400 18px/15px '微软雅黑';
        margin-bottom: 10px;
      }
      .location {
        color: #666;
      }
    }

    .right {
      padding-top: 10px;
      float: right;
    }
  }

  .decoration {
    height: 7px;
    background: url('')
      repeat-x 15px;
    background-size: contain;
  }

  // 打勾
  .icon-success {
    // aa
    line-height: 50px;
  }

  .icon-box {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    background-color: orange;
    margin-top: 8px;
    margin-right: 10px;
    color: #fff;
  }
  .icon-money {
    overflow: hidden;
    font-size: 27px;
  }
  .group-cell {
    margin-top: 8px;
  }
  .submit_btn {
    height: 50px;
    width: 230px;
  }
  .order-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding-right: 0;
    padding-top: 0;
    height: 60px;
  }

  .message {
    font-size: 17px;
    color: #a0a0a0;
  }
}
</style>
